<template>
  <div>
    <!-- <h2>This is an 发布 page</h2> -->
  </div>
  <div class="box">
    <div class="t">
      标题
      <el-input
        v-model="title"
        style="width: 240px"
        placeholder="请输入标题"
        clearable
      />
    </div>
    <div class="c">
      内容
      <!-- <el-input
        v-model="content"
        style="width: 240px"
        placeholder="请输入内容"
        clearable
      /> -->
      <el-input
        v-model="content"
        style="width: 240px"
        :rows="2"
        type="textarea"
        placeholder="请输入内容"
      />
    </div>
    <div class="s">
      是否公开
      <el-switch v-model="value" />
    </div>
    <div class="b">
      <el-button type="primary" round @click="send()">发布</el-button>
      <el-button type="danger" round @click="reset()">重置</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import http from "@/utils/http";
import { ref } from "vue";
const title = ref("");
const content = ref("");
const value = ref(false);

// 发布文章
function send() {
  http({
    url: "/posts",
    method: "post",
    data: {
      title: title.value,
      content: content.value,
      status: value.value,
    },
  }).then((res) => {
    console.log(res.data);
    // 清空输入框
    title.value = "";
    content.value = "";
    value.value = false;
  });
}
// 重置
function reset() {
  // 清空输入框
  title.value = "";
  content.value = "";
  value.value = false;
}
</script>

<style scoped>
.box {
  width: 500px;
  height: 300px;
  background-color: rgb(230, 255, 209);
  position: relative;
  /* margin: 10px; */
}
.t,
.c,
.s,
.b {
  width: 280px;
  margin: 0 auto;
  padding: 10px;
}
.t {
  padding-top: 40px;
}
</style>
